<template>
  <div class="boxs">
    <!-- <Header :params="params" /> -->
    <div class="box">
      <!-- 个人信息展示 -->
      <div class="userInfo">
        <div class="userImg">
          <img :src="userInfo.userHead" alt="">
        </div>
        <div class="userName">
          <div>{{userInfo.username}}</div>
          <div>个性签名：{{userInfo.userGexing}}</div>
        </div>
      </div>
      <!-- 奖章 -->
      <div class="medal">
        <div class="medal_l">
          <img src="/img/personal/medal.png" alt="">
          <span>Ta的奖章</span>
        </div>
        <div class="medal_r">
          <span class="medal_r_con">
            <img :src="'http://niu.icrobot.cn/'+item.colorMedal" v-for="(item, index) in list" :key="index" alt="">
          </span>
        </div>
      </div>
      <!-- 部门/校区 & 职位 -->
      <div class="dep_top">
        <span>部门/校区</span>
        <span class="gray">{{userInfo.userDepartment}}</span>
      </div>
      <div class="dep_bottom">
        <span>职位</span>
        <span class="gray">{{userInfo.job}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      params: {
        left: true,
        title: "",
      },
      userId: "",
      userInfo: {},
      points: "",
      list: []
    };
  },
  mounted() {
    this.userId = this.$route.query.userId;
    this.queryOtherInfo();
    this.queryMyPoint();
  },
  methods: {
    queryOtherInfo() {
      (async () => {
        const { data } = await this.get("/user/userInfo", {
          userId: this.userId,
        });
        this.userInfo = data;
      })();
    },
    // 先查一下点击头像那个人的积分
    queryMyPoint() {
      (
        async () => {
          const {data} = await this.get("/user/queryMyPoint",{
            userId: this.userId
          });
          this.points = data.a;
          this.selectAllMedal();
        }
      )()
    },
    // 再根据积分查点亮的奖章

    selectAllMedal() {
      (async () => {
        const { data } = await this.get("/medal/selectAllMedal");
        for (var i=0; i<data.length; i++) {
          if (this.points>=data[i].minSocre || this.points >= data[i].maxSocre) {
            this.list.push(data[i]);
          }
        }
        console.log(this.list);
      })();
    },
  },
};
</script>

<style lang="scss" scoped>
.boxs {
  width: 100%;
  height: 100%;
  background-color: #f7f9fa;
}
/deep/ .gray {
  font-size: 0.26rem;
  font-family: PingFang SC;
  color: #cccccc;
}
.box {
  .userInfo {
    width: 7.5rem;
    height: 1.56rem;
    background: #ffffff;
    padding: 0 0.24rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .userImg {
      margin-right: 0.18rem;
      img {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
      }
    }
    .userName div:first-child {
      font-size: 0.3rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .userName div:last-child {
      font-size: 0.22rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #7d7d7d;
      margin-top: 0.12rem;
    }
  }
  .medal {
    width: 7.5rem;
    height: 1rem;
    background: #ffffff;
    padding: 0 0.24rem;
    box-sizing: border-box;
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    .medal_l {
      display: flex;
      align-items: center;
      img {
        width: 0.5rem;
        height: 0.5rem;
      }
      span {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-left: 0.16rem;
      }
    }
    .medal_r {
      font-size: 0.1rem;
      margin-left: 0.37rem;
      width: 4.7rem;
      overflow-x: auto;
      .medal_r_con {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #7d7d7d;
        display: flex;
        align-items: center;
        height: 0.9rem;
        // line-height: 0.9rem;
        img {
          width: 0.7rem;
          height: 0.7rem;
          margin-right: 0.08rem;
        }
      }
    }
  }
  .dep_top {
    width: 7.5rem;
    height: 1rem;
    background: #ffffff;
    font-size: 0.3rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #5f5f5f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.24rem;
    box-sizing: border-box;
    margin-top: 0.1rem;
    border-bottom: 0.01rem #e7e7e7 solid;
  }
  .dep_bottom {
    width: 7.5rem;
    height: 1rem;
    background: #ffffff;
    font-size: 0.3rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #5f5f5f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.24rem;
    box-sizing: border-box;
  }
}
</style>